import React,{useEffect,useState} from 'react';
import { Table, Button, DatePicker, notification, Input, Modal, Card, Form,Select } from 'antd'
import { useNavigate } from 'react-router-dom';

import { FormOutlined, DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import { clock_list,clock_del,clock_search,clock_update } from '../../../../api/clockApi/api';
import './Clock.scss'
import MapL from '../../../../component/Map.jsx'
interface Props{}
function Clock(props:Props) {
    const { Search } = Input
    const [form] = Form.useForm()
    var [clocklist,setClock] = useState([])
    var [searchList1,setSearch1] = useState([])
    var navigate = useNavigate()
    useEffect(()=>{
      clock_list().then((res)=>{
        console.log(res.data);
        setClock(res.data)
      })
    },[])
    // 删除信息
    var [delId,setId] = useState('')
    var del = (record:any)=>{
      setOpen(true);
      setId(record.id)
    }
    // 定义警示框
    const [open, setOpen] = useState(false);
    const hideModal = () => {
      setOpen(false);
    };
    const hideModalOk = ()=>{
      clock_del(delId).then((res)=>{
        console.log(res.data);  
        
      })
      clock_list().then((res)=>{
        setClock(res.data)
      })
      setOpen(false)
    }
    // 搜索信息 
   var onSearch = (val:any)=>{
     if(val == ''){
        notification.info({message:'搜索信息不能为空'})
     }else{
        clock_search(val).then((res)=>{
          console.log(res.data);
          setSearch1(res.data)
        })
     }

   }
    //编辑信息
    const { Option } = Select;
    var ngvigate = useNavigate()
    const config = {
        rules: [
          {
            type: 'object',
            required: true,
            message: 'Please select time!',
          },
        ],
      };
   
    const [isModalOpen, setIsModalOpen] = useState(false);
    var onFinish = (values:any)=>{
          console.log(values);
          clock_update({id:value.id,addressname:values.addressname,fulladdress:values.fulladdress,range:values.range}).then((res)=>{
            console.log(res.data);
            clock_list().then((res)=>{
              setClock(res.data)
            })
            notification.success({message:'修改信息成功'})
          })
    }
    const showModal = () => {
        form.resetFields();
        setIsModalOpen(true);
      };
    // 保存record中的数据
    var [value,setValue] = useState<any>({})
    var edit = (record:any)=>{
      console.log(record);
      setValue(record)
      showModal()
    }
      const handleOk = () => {
        setIsModalOpen(false);
        form.submit();
      };
    
      const handleCancel = () => {
        form.resetFields();
        setIsModalOpen(false);
        
      };
      const onGenderChange = (value:any) => {
        console.log(value);
        
      };
    

  //决定了每一列渲染什么数据
  const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        render: (text:string, record:any, index:any) => `${index + 1}`
    },
    {
        title: '地址名称',//表格列的名字(显示在表格头上)
        key: 'addressname',
        dataIndex: 'addressname',//数据对应的属性名

    },
    {
        title: '详细地址',
        dataIndex: 'fulladdress',
        key: 'fulladdress',

    },
    {
        title: '打卡范围',
        dataIndex: 'range',
        key: 'range',

    },
    {
        title: '操作人',
        dataIndex: 'admin',
        key: 'admin',

    },
    {
        title: '操作',
        key: 'action',
        render: (_:any, record:any, key:any) => (
            <>
                <FormOutlined className='edit' onClick={() => { edit(record) }} />
                <DeleteOutlined className='del' onClick={() => { del(record) }} />
            </>
        )
    }
]
  clocklist = searchList1.length == 0 ? clocklist : searchList1
return (
    <div className='clockin'>
         {/* <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
            <Breadcrumb.Item>账号管理</Breadcrumb.Item>
            <Breadcrumb.Item>管理员列表</Breadcrumb.Item>
        </Breadcrumb> */}
         <Card title="打卡管理" bordered={false} >
        {/* 表格组件 */}
        {/* columns 表格每一列如何渲染 */}
        {/* dataSource 表格的数据源 */}
        <div className='button'>
        <Search style={{ width: 300, marginRight: 20 ,marginLeft: 20,marginBottom:30 }} placeholder="输入地址名称" enterButton onSearch={onSearch}  />
        
        </div>
        <Modal title="修改打卡信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true}>
          <Form
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            onFinish={onFinish}
            // 绑定form实例
            form={form}
          >
            <Card>
                <MapL/>
            </Card>
            <Form.Item
                     label="地址名称"
                     name="addressname"
                     rules={[{ required: true, message: '输入地址名称' }]}
                     initialValue={value.addressname}
                 >
                     <Input placeholder='输入地址名称'/>
                 </Form.Item>
                 <Form.Item
                     label="详细地址"
                     name="fulladdress"
                     rules={[{ required: true, message: '输入详细地址' }]}
                     initialValue={value.fulladdress}
                 >
                     <Input  placeholder='输入详细地址'/>
                 </Form.Item>
                 <Form.Item
                     label="打卡范围"
                     name="range"
                     rules={[{ required: true, message: '输入打卡范围' }]}
                     initialValue={value.range}
                 >
                     <Input  placeholder='输入打卡范围'/>
                 </Form.Item>
               
               
          </Form>
        </Modal>

        {/* 警告框 */}
        <Modal
        title="提示"
        open={open}
        onOk={hideModalOk}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
      >
        <div className='confirm'>
          <ExclamationCircleOutlined />
          <span>一旦删除信息无法恢复,确定要删除吗？</span>
        </div>
      </Modal>

            <Table columns={columns} dataSource={clocklist}/>
         </Card>
    </div>
);
}

export default Clock;